<template>
  <view class="custom-tab-bar">
    <!-- 左侧：客服中心 -->
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 0 }"
      @tap="switchTab(0)"
    >
      <view class="tab-icon">🏠</view>
      <view class="tab-text">客服中心</view>
    </view>
    
    <!-- 中间：扫码按钮（突出显示） -->
    <view class="scan-tab-item" @tap="handleScan">
      <view class="scan-circle">
        <view class="scan-text">扫码</view>
      </view>
    </view>
    
    <!-- 右侧：我的 -->
    <view 
      class="tab-item" 
      :class="{ active: currentTab === 2 }"
      @tap="switchTab(2)"
    >
      <view class="tab-icon">👤</view>
      <view class="tab-text">我的</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabBar',
  data() {
    return {
      currentTab: 0,
      tabList: [
        {
          pagePath: '/pages/index',
          text: '客服中心'
        },
        {
          pagePath: '/pages/scan/index',
          text: '扫码'
        },
        {
          pagePath: '/pages/mine/index',
          text: '我的'
        }
      ]
    }
  },
  created() {
    this.updateCurrentTab()
  },
  methods: {
    // 切换Tab
    switchTab(index) {
      if (index === 1) {
        // 扫码功能特殊处理
        this.handleScan()
        return
      }
      
      this.currentTab = index
      const tabItem = this.tabList[index]
      
      uni.switchTab({
        url: tabItem.pagePath,
        success: () => {
          this.updateCurrentTab()
        }
      })
    },
    
    // 处理扫码
    handleScan() {
      this.startScan()
    },
    
    // 开始扫码
    startScan() {
      const self = this
      
      // 微信小程序扫码
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果：', res)
          const result = res.result
          
          // 解析扫码结果获取设备ID
          const deviceId = self.parseDeviceId(result)
          if (deviceId) {
            // 跳转到首页，自动显示WiFi信息
            uni.switchTab({
              url: '/pages/index',
              success: () => {
                // 使用延迟确保页面已加载，然后传递deviceId
                setTimeout(() => {
                  // 通过全局事件传递deviceId
                  uni.$emit('scanDeviceId', deviceId)
                }, 100)
              }
            })
          } else {
            uni.showToast({
              title: '二维码格式错误',
              icon: 'error'
            })
          }
        },
        fail: (error) => {
          console.error('扫码失败：', error)
          uni.showToast({
            title: '扫码失败',
            icon: 'error'
          })
        }
      })
    },
    
    // 解析设备ID
    parseDeviceId(qrResult) {
      try {
        if (qrResult.includes('deviceId=')) {
          const match = qrResult.match(/deviceId=([^&]+)/)
          return match ? decodeURIComponent(match[1]) : null
        }
        
        if (qrResult.startsWith('http')) {
          const url = new URL(qrResult)
          return url.searchParams.get('deviceId')
        }
        
        if (/^[A-Z0-9-]+$/.test(qrResult)) {
          return qrResult
        }
        
        return null
      } catch (error) {
        console.error('解析二维码失败：', error)
        return null
      }
    },
    
    // 更新当前Tab状态
    updateCurrentTab() {
      const pages = getCurrentPages()
      if (pages.length > 0) {
        const currentPage = pages[pages.length - 1]
        const route = '/' + currentPage.route
        
        const tabIndex = this.tabList.findIndex(item => item.pagePath === route)
        if (tabIndex !== -1) {
          this.currentTab = tabIndex
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #ffffff;
  border-top: 1rpx solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999999;
  transition: color 0.3s ease;
  
  &.active {
    color: #1890ff;
  }
}

.tab-icon {
  font-size: 44rpx;
  margin-bottom: 8rpx;
}

.tab-text {
  font-size: 20rpx;
  line-height: 1;
}

.scan-tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -30rpx; /* 向上突出 */
}

.scan-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.4);
  border: 6rpx solid #ffffff; /* 白色边框 */
}

.scan-text {
  color: #ffffff;
  font-size: 24rpx;
  font-weight: bold;
}
</style> 